<template>
	<view class="mainpadding">
		<view class="placeimage flexcenter" v-if="list.length==0">
			<image src="../../static/image/system/placeimagethree.png" mode=""></image>
		</view>
		<view v-if="list.length!=0">
			<!-- 请选择打卡题目 -->
			<view class="timu">
				<view class="xuznze margin_top">请选择打卡题目</view>
				<view class="flexleft flex_wrap">
					<view class="flexcenter btnbox margin_top" v-for="item in list" :key="item.id"
						@click="checkselect(item.id)">
						<view :class="item.id==selectcurrent?'btn btns1':'btn btn1'">{{item.name}}</view>
					</view>
				</view>
			</view>
			<!-- 今日打卡任务 -->
			<view class="renwu margin_top">
				<view class="xuznze ">打卡任务</view>
				<view v-for="item in list" :key="item.id">
					<view class="wancheng" v-show="item.id==selectcurrent">
						<text v-for="ite in item.task">{{ite.name}}</text>
					</view>
				</view>
			</view>
			<!-- 学习心得 -->
			<view class="xinde">
				<view class="xuznze ">学习时间/内容/心得</view>
				<view v-for="item in list" :key="item.id">
					<view v-show="item.id==selectcurrent" class="textareabox radius mainpadding_top">
						<textarea class="textarea" maxlength="-1" placeholder="请上传学习心得..."
							v-model="item.content"></textarea>
					</view>
					<!-- <view class="flexright textarea">{{num}}/100字</view> -->
				</view>
			</view>
			<!--请上传学习进度截图  -->
			<view class="jietu margin_top">
				<view class="xuznze ">请上传学习进度截图</view>
				<view v-for="(item,indexfather) in list" :key="item.id">
					<view class="flexleft margin_top jietubox" v-show="item.id==selectcurrent">
						<view class="flexcenter wentibox" v-for="(itemimg,index) in item.upimg" :key="index">
							<view class="tupianbox">
								<view class="tupian radius">
									<image class="radius" :src="itemimg" mode=""></image>
								</view>
								<view class="xiaotubiao" @click="deleimage(indexfather,index)">
									<image src="../../static/image/system/chahao.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="flexcenter wentibox" v-if="item.upimg.length>=4?false:true">
							<view class="beijing" @click="uploadImg(indexfather)">
								<view class="xiaojiahao">
									<image src="../../static/image/system/jiahao.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 打卡 -->
			<view class="qdaka">
				<view class="tuiku mainpadding margin_top" @click="submit">确定打卡</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list: [],
				selectcurrent: "",
				currentdate: "",
				// 日期任务
				// task: {},
				content: "",
				upImg: [],
			}
		},
		onLoad(options) {
			this.currentdate = options.date
			this.getlist()
			// this.gettask()
		},
		onShow() {

		},
		computed: {
			num() {
				return this.content.length
			}
		},
		methods: {
			// 打卡历史
			// gethistory(){
			// 	httpRequest.request("/api/user/user_task", 'POST', {
			// 		date: this.currentdate
			// 	}, false, false, true).then(res => {
			// 		this.history = res.data
			// 	})
			// }
			// 获取题目分类
			// getlist() {
			// 	httpRequest.request("/api/quizz_category/lists", 'POST', {}, false, false, true).then(res => {
			// 		this.list = res.data
			// 		this.selectcurrent = res.data[0].id
			// 	})
			// },
			getlist() {
				httpRequest.request("/api/task_category/lists", 'POST', {
					date: this.currentdate
				}, false, false, true).then(res => {
					res.data.forEach(item => {
						Object.assign(item, {
							content: "",
							upimg: []
						})
					})
					this.list = res.data
					this.selectcurrent = res.data[0].id
				})
			},
			// 切换题目id
			checkselect(id) {
				this.selectcurrent = id
			},
			// 获取日期任务
			// gettask() {
			// 	httpRequest.request("/api/user/date_task", 'POST', {
			// 		date: this.currentdate
			// 	}, false, false, true).then(res => {
			// 		this.task = res.data
			// 	})
			// },
			// 上传图片
			uploadImg(index) {
				console.log(index, 999)
				let _this = this;
				let upImgs = this.list[index].upimg
				let num = 4 - upImgs.length;
				if (num <= 0) {
					return false;
				}
				uni.showActionSheet({
					itemList: ['相机', '相册'],
					success: function(res) {
						console.log(res)
						// 选择相机走0
						if (res.tapIndex == 0) {
							httpRequest.chooseImage(num, ['camera']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], index)
								}
							}).catch(err => {});
						}
						// 选择相册走1
						if (res.tapIndex == 1) {
							httpRequest.chooseImage(num, ['album']).then(res => {
								for (var i = 0; i < res.length; i++) {
									_this.uploadImageService(res[i], index)
								}
							}).catch(err => {});
						}
					},
					fail: function(res) {}
				});
			},
			// 详情转载
			uploadImageService(url, upImg) {
				let _this = this;
				httpRequest.uploadFile('/api/common/upload', url).then(res => {
					let image_item = res.fullurl;
					this.list[upImg].upimg.push(image_item);
				}).catch(err => {});
			},
			deleimage(index, i) {
				this.list[index].upimg.splice(i, 1)
			},
			// 提交确定打卡
			submit() {
				// if (this.selectcurrent == "") {
				// 	httpRequest.toast("您还未选择打卡题目")
				// 	return false
				// }
				// if (this.content == "") {
				// 	httpRequest.toast("您还未填写学习心得")
				// 	return false
				// }
				// if (this.content == "") {
				// 	httpRequest.toast("您还未上传学习进度截图")
				// 	return false
				// }
				let data = []
				let end = true
				this.list.map(item => {
					if (item.content == "" || item.upimg.length == 0) {
						httpRequest.toast("请将所有类目打卡内容全部填写完成")
						end = false
						return false
					}
					data.push({
						date: this.currentdate,
						task_id: item.task[0].id,
						task_category_id: item.id,
						content: item.content,
						images: item.upimg.join()
					})
				})
				if (end) {
					httpRequest.request("/api/user/task_add", 'POST', {
						data: data
					}, false, false, true).then(res => {
						httpRequest.toast(res.msg)
						if (res.code == 1) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.placeimage{
		margin-top: 150rpx;
		width: 100%;
		image{
			width: 230rpx;
			height: 280rpx;
		}
	}
	.qdaka {
		padding: 30rpx 30rpx 60rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
	}

	.xiaojiahao {
		width: 31rpx;
		height: 31rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// .tuiku {
	// 	font-size: 30rpx;
	// 	font-family: Microsoft YaHei;
	// 	font-weight: bold;
	// 	color: #FFFFFF;
	// 	box-sizing: border-box;
	// 	text-align: center;
	// 	background: #DCB490;
	// 	box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(51, 51, 51, 0.0500);
	// 	border-radius: 50rpx;
	// }

	.dibu {
		position: fixed;
		width: 100%;
		box-sizing: border-box;
		bottom: 60rpx;
		left: 0rpx;
	}

	.jietu {
		padding-bottom: 200rpx;
	}

	.jietubox {
		flex-wrap: wrap;
	}

	.wentibox {
		width: 25%;
	}

	.tupianbox {
		position: relative;

	}

	.tupian {
		width: 150rpx;
		height: 150rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.beijing {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #F6F6F6;
		box-shadow: 0rpx 0rpx 15rpx 0rpx rgba(51, 51, 51, 0.1000);
		width: 150rpx;
		height: 150rpx;
	}

	.xiaotubiao {
		position: absolute;
		top: -14rpx;
		right: -2rpx;
		width: 26rpx;
		height: 26rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.textareabox {
		background-color: #fafafa;

		textarea {
			height: 150rpx;
		}
	}

	.textarea {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
		width: 100%;
		box-sizing: border-box;
	}

	.wancheng {
		text-indent: 48rpx;
		font-size: 24rpx;
		margin: 30rpx 0;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
	}

	.btn2 {
		background-color: rgba(229, 115, 91, .2);
		color: #E5735B;
		box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(51, 51, 51, 0.1000);
		border: 1rpx solid #fff;
	}

	.btns2 {
		background-color: rgba(229, 115, 91, .2);
		color: #E5735B;
		box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(51, 51, 51, 0.1000);
		border: 1rpx solid #E5735B;
	}

	.btn3 {
		background-color: rgba(183, 209, 216, .2);
		box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(51, 51, 51, 0.1000);
		border: 1rpx solid #fff;
		color: #B7D1D8;
	}

	.btns3 {
		background-color: rgba(183, 209, 216, .2);
		box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(51, 51, 51, 0.1000);
		color: #FFAF88;
		border: 1rpx solid #B7D1D8;
		color: #B7D1D8;
	}

	.btn1 {
		background-color: rgba(255, 175, 136, .2);
		box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(51, 51, 51, 0.1000);
		color: #FFAF88;
		border: 1rpx solid #fff;
	}

	.btns1 {
		background-color: rgba(255, 175, 136, .2);
		box-shadow: 0rpx 0rpx 5rpx 0rpx rgba(51, 51, 51, 0.1000);
		color: #FFAF88;
		border: 1rpx solid #FFAF88;
	}

	.xuznze {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.btn {
		border-radius: 37rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 206rpx;
		height: 74rpx;
	}

	.btnbox {
		width: 33.33%;
	}
</style>
